<template>
  <div class="wrapdiv">
    <el-row :gutter="5">
      <el-col :span="8" class="echartcol">
        <div class="chartdiv">
          <div id="mychart"></div>
        </div>
      </el-col>

      <el-col :span="16" class="statuscol">
        <el-table
          ref="multipleTable"
          :data="statusList"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{
            borderRadius: '3px',
            backgroundColor: 'rgba(0,0,0,.1)',
          }"
          @selection-change="handleSelectionChange"
        >
          <!-- selection -->
          <el-table-column type="index" width="55"></el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="300"
          ></el-table-column>
          <el-table-column prop="ip" label="IP"></el-table-column>
          <el-table-column prop="last_time" label="更新时间"></el-table-column>
          <el-table-column label="任务" width="100">
            <i class="el-icon-caret-right"></i>
          </el-table-column>
          <el-table-column label="截屏" width="100">
            <i class="el-icon-camera-solid"></i>
          </el-table-column>
          <!-- <el-table-column prop="network" label="通讯状态">
             <template slot-scope="scope">
               <span :style="{ 'color':scope.row.network =='ok'?'green':'red'}">
               {{ scope.row.network =='ok'? '√':'×'}}
               </span>
             </template>
          </el-table-column> -->
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Status",
  data() {
    return {
      form_search: {
        ip: "",
        screen_name: "",
        screen_type: "",
        screen_brand: "",
      },

      statusList: [],
      myChart: null,
      option: {},
    };
  },
  mounted() {
    //网络请求后台 屏幕的网络状态
    this.getStatusList();

    this.myChart = echarts.init(document.getElementById("mychart"));
    this.option = {
      darkMode: "auto",
      // color 对应series 里 data
      color: ["green", "red"],
      title: {
        text: "通讯状态统计",
        subtext: "图表",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "通讯",
          type: "pie",
          radius: "50%",
          // 后台 只更新value
          data: [
            { value: 90, name: "正常" },
            { value: 10, name: "故障" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.myChart.setOption(this.option);

    // this.myChart.on('click', function(params){
    //   // console.log(params);
    //   // 正常 故障
    //   console.log(params.name)

    // })
    this.myChart.on("click", { seriesIndex: 0, name: "正常" }, function () {
      console.log("正常!");
    });

    this.myChart.on("click", { seriesIndex: 0, name: "故障" }, function () {
      console.log("故障!");
    });

    setTimeout(() => {
      this.option.series[0].data = [
        { value: 69, name: "正常" },
        { value: 31, name: "故障" },
      ];
      console.log(this.option);
      this.myChart.setOption(this.option);
    }, 5000);
  },
  methods: {
    async getStatusList() {
      let ret = await this.$http.get("status");
      const { status } = ret.data.data;
      this.statusList = status;
      console.log(status);
    },
    edit_group(id) {
      alert(id);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    onSubmit() {
      console.log(this.form_search);
    },
  },
};
</script>

<style scoped>
.wrapdiv {
  width: 98%;
  height: 98%;
  border-radius: 10px;
  box-shadow: 0 0 10px #aaa;
  padding: 5px;
  overflow: hidden;
}
.wrapdiv .el-row {
  /* background-color: red; */
  height: 100% !important;
  overflow: hidden;
}
.chartdiv {
  /* background-color: #666; */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mychart {
  width: 95%;
  height: 90%;
  padding-top: 20px;
  border: 1px dashed #ddd;
  border-radius: 10px;
  /* background-color: rgba(172, 172, 29, 0.1); */
}
.echartcol {
  /* border-radius: 10px; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.statuscol {
  height: 100%;
  /* 加了,多了之后,不显示开头的 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow-y: scroll; */
}
.statuscol .el-table {
  height: 92%;
  overflow-y: scroll;
  border: 1px dashed #ddd;
  border-radius: 10px;
}
</style>
